<!-- 收到的评论和@ -->
<template>
	<view>
		<u-gap height="2" bg-color="#E9E9E9"></u-gap>
		<view style="padding-top:300rpx;" v-if="pageData.length==0">
			<u-empty></u-empty>
		</view>
		<view v-for="item in pageData" :key="item.id">
			<view class="item">
				<view class="item1">
					<image :src="item.avatar" mode="" class="img"></image>
				</view>
				<view class="item2">
					<view class="row1">
						<view class="col1">{{item.c_name}}</view>
						<view class="col2" v-if="item.c_name==item.trends_author">作者</view>
					</view>
					<view class="row2">
						<view class="col1" v-if="item.is_reply">评论了你的笔记</view>
						<view class="col1" v-else>回复了你的评论</view>
						<view class="col2">{{item.create_time}}</view>
					</view>
					<view class="row3">{{item.reply_content}}</view>
					<view class="row4" v-if="item.is_reply">
						<view class="col1"></view>
						<view class="col2">{{item.comment_desc}}</view>
					</view>
					<view class="row5">
						<view class="col1" @click="huifuFn(item.id,item.u_id)">
							<u-icon name="chat"></u-icon>
							<view class="txt">回复评论</view>
						</view>
						<view class="col2">
							<u-icon name="heart"></u-icon>
						</view>
					</view>
				</view>
				<view class="item3">
					<image :src="item.picture[0]" mode="" class="img"></image>
				</view>
			</view>
			<view class="line"></view>
		</view>
		<input type="text" class="ipt" confirm-type="send" v-if="focusBool" :focus="focusBool" v-model="content"
			@blur="focusBool=false" @confirm="sendFn">





		<!-- 弹窗 -->

	</view>
</template>

<script>
	import api from '@/commonJS/api.js';
	import common from '@/commonJS/common.js';
	export default {
		data() {
			return {
				myInfo: '', //我的信息
				pageData: [], //页面数据
				currentId: 0, //回复评论的id
				currentUid: 0, //回复评论的uid
				content: '',
				focusBool: false, //获取焦点并显示、失去焦点并隐藏

			}
		},
		onLoad() {
			if (uni.getStorageSync('userInfo')) {
				this.myInfo = JSON.parse(uni.getStorageSync('userInfo'));
				console.log('我的信息', this.myInfo);
				this.getPageData();
			} else {
				uni.navigateTo({
					url: '/pagesLogin/login'
				});
			}
		},
		methods: {
			// 获取当前页面数据
			getPageData() {
				const obj = {
					u_id: 1
				}
				const _this = this;
				common.ajaxFn(api.im_shoudaode, 'POST', obj).then((res) => {
					console.log('页面数据', res.data.data.list);
					if (res) {
						_this.pageData = res.data.data.list;
						_this.currentId = res.data.data.list[0].id; //第一条id
						_this.currentUid = res.data.data.list[0].u_id; //第一条uid
					}
				});
			},
			// 回复
			huifuFn(id, uid) {
				if (this.currentId != id) {
					this.content = '';
				}
				this.currentId = id;
				this.currentUid = uid;
				this.focusBool = true;
			},
			// 发送
			sendFn() {
				console.log('回复评论');
				if (this.content.trim()) {
					const obj = {
						id: this.currentId,
						user_id: this.currentUid,
						reply_content: this.content
					}
					const _this = this;
					common.ajaxFn(api.im_huifu, 'POST', obj).then((res) => {
						console.log('回复评论', res);
						if (res) {
							_this.getPageData();
						}
					});
				} else {
					uni.showToast({
						title: '评价内容不能为空',
						icon: 'none'
					});
				}
			},

		}
	}
</script>

<style lang="scss" scoped>
	.item {
		padding: 48rpx 20rpx 40rpx 20rpx;
		display: grid;
		grid-template-columns: auto 1fr auto;
		grid-column-gap: 20rpx;

		.item1 {
			.img {
				display: block;
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
			}
		}

		.item2 {
			.row1 {
				display: flex;
				align-items: center;

				.col1 {
					color: $gray-three;
					font-size: $font-erba;
					font-weight: bold;
				}

				.col2 {
					margin-left: 12rpx;
					padding: 2rpx 10rpx 4rpx 8rpx;
					border: 1px solid #E9E9E9;
					border-radius: 18rpx;
					color: $gray-nine;
					font-size: $font-erer;
				}
			}

			.row2 {
				margin-top: 6rpx;
				display: flex;
				align-items: center;
				color: $gray-six;
				font-size: $font-ersi;

				.col1 {}

				.col2 {
					margin-left: 14rpx;
				}
			}

			.row3 {
				margin-top: 10rpx;
				color: $gray-three;
				font-size: $font-erba;
			}

			.row4 {
				margin-top: 10rpx;
				display: flex;
				align-items: center;

				.col1 {
					margin-right: 8rpx;
					width: 8rpx;
					height: 36rpx;
					background-color: #D9D9D9;
					border-radius: 100rpx;
				}

				.col2 {
					color: $gray-six;
					font-size: $font-erba;
				}
			}

			.row5 {
				margin-top: 26rpx;
				display: flex;
				align-items: center;

				.col1 {
					width: 176rpx;
					height: 50rpx;
					background-color: #EEE;
					border-radius: 25rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					position: relative;

					.txt {
						margin-left: 8rpx;
						color: $gray-three;
						font-size: $font-ersi;
					}
				}

				.col2 {
					margin-left: 14rpx;
					width: 50rpx;
					height: 50rpx;
					background-color: #EEE;
					border-radius: 50%;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}
		}

		.item3 {
			.img {
				display: block;
				width: 80rpx;
				height: 80rpx;
				border-radius: 8rpx;
			}
		}
	}

	.line {
		width: 710rpx;
		height: 1px;
		background-color: #E9E9E9;
		margin: 0 auto;
	}

	.ipt {
		width: 100%;
		height: 80rpx;
		position: absolute;
		left: 0;
		bottom: 0;
		border: 1px solid #E9E9E9;
		box-sizing: border-box;
	}
</style>